<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)
const color = ['rgba(255, 152, 38, 0.3)', 'rgba(255, 152, 38, 0.01)', 'rgba(254, 230, 110, 0.3)', 'rgba(254, 230, 110, 0.01)'];
onMounted(() => {

  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      color: ['#ff9826','#fde985'],
      grid: {
        top: 10,
        bottom: 45,
        right: 20,
      },
      xAxis: {
        type: 'category',
        data: ['2020', '2021', '2022', '2023', '2024'],
        axisLabel: {
          color: 'rgba(0, 0, 0, 0.65)',
          interval: 0,
          rotate: 45,//倾斜度 -90 至 90 默认为0
          margin: 10
        },
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'line',
          showSymbol: true,
          lineStyle: {
            color: "#ff9826",
            width: 2,
          },
          label:{
            show:true
          },
          areaStyle: {
            //区域填充样式
            normal: {
              color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: color[0],
                    },
                    {
                      offset: 1,
                      color: color[1],
                    },
                  ],
                  false
              ),
            },
          },
          data: [599, 2555, 1510, 124, 0],
        },
        {
          type: 'line',
          showSymbol: true,
          lineStyle: {
            color: "#fde985",
            width: 2,
          },
          label:{
            show:true
          },
          areaStyle: {
            //区域填充样式
            normal: {
              color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: color[2],
                    },
                    {
                      offset: 1,
                      color: color[3],
                    },
                  ],
                  false
              ),
            },
          },
          data: [598, 1003, 1055, 0, 0],
        },

      ],
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})


</script>

<style lang="less" scoped>
</style>
